<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2024/8/23
  Time: 9:49
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set value="${pageContext.request.contextPath}" var="path"> </c:set>
<script src="${path}/static/web/js/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="${path}/static/web/css/AddStyle.css"/>
<html>
<head>
    <title>业主个人信息修改</title>
    <!-- 添加提交事件 -->
    <script>
        $(function (){
            $("#myform").submit(check);
        });
        function check()
        {
            var ftel = checktel();
            var fpwd = checkPwd1();
            return ftel&&fpwd;
        }
    </script>
    <!--取消按钮-->
    <script>
        $(function () {
            $("#cancel").click(cancel);
        })

        function cancel() {
            location.href = "${path}/web/index";


        }

    </script>
    <!-- 验证头像-->
    <script>
        $(function (){
            $("#face").change(checkface);
        });
        function checkface()
        {
            var file = $("#face")[0].files[0];

            //验证文件扩展名

            //预览
            var fileReader = new FileReader();

            fileReader.onload = function(e){
                $("#preview").attr("src",e.target.result);
            }

            fileReader.readAsDataURL(file);
        }
    </script>
    <!-- 验证密码是否为空并且密码是否一致-->
    <script>
        $(function (){
            $("#pwd2").blur(checkPwd2);
        });
        function checkPwd2()
        {
            var pwd1 = $("#pwd1").val();
            var pwd2 = $("#pwd2").val();

           if(pwd1==pwd2)
            {
                $("#pwd2Rs").css("color","green");
                $("#pwd2Rs").html("√");

            }
            else
            {
                $("#pwd2Rs").css("color","red");
                $("#pwd2Rs").html("密码不一致");
            }
        }
    </script>

    <!-- 验证手机号是否11位或是否为空-->
    <script type="text/javascript">
        $(function (){
            $("#tel").blur(checktel);
        });
        function checktel()
        {
            var tel = $("#tel").val();
            var reg = /^1[3-9]\d{9}$/;
            var flag = reg.test(tel)
            if(flag==true&&tel!="")
            {
                $("#telRs").css("color","green");
                $("#telRs").html("√");
                return true;
            }
            else
            {
                $("#telRs").css("color","red");
                $("#telRs").html("手机格式错误或不能为空");
                return false;
            }
        }
    </script>
</head>
<body style="width:100%;height:100%;background-image:url(${path}/static/web/images/background.jpg);background-repeat: no-repeat;background-position:top center;background-size:cover;background-attachment:fixed;">
<div style="background:rgba(0,0,0,0.5);
	width:487px;
	height:400px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-243px;
	margin-top:-171px;
	border-radius:20px;">
    <div class="loginPanel">
<form action="/project/web/userInfoUpdateCheck" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" value="${sessionScope.user.id}">
        <table style=" margin:50px auto;">
            <tbody>
       <tr><td style="color: white">姓名:</td><td>  <input name="UserName" value="${sessionScope.user.userName}" placeholder="请输入您的姓名"></td><td></td></tr>
        <tr><td style="color: white">手机号:</td><td><input name="UserPhone" placeholder="请输入您的手机号" value="${sessionScope.user.userPhone}" id="tel"><span id="telRs"></span></td></tr>
       <tr><td style="color: white">密码:</td><td><input name="UserPass"  id="pwd1"  value="" type="password" PLACEHOLDER="请输入密码,不输入即不修改密码"></td></tr>
        <tr><td style="color: white">确认密码:</td><td><input type="password"  id="pwd2" placeholder="请再次输入密码"><span id="pwd2Rs" ></span></td></tr>
       <tr><td style="color: white">楼牌号:</td><td><input  name="HouseNumber" VALUE="${sessionScope.user.houseNumber}" id="homenum" placeholder="请输入您的楼牌号"></td></tr>
        <tr><td style="color: white">头像:</td><td><input type="file" name="face" id="face" accept=".jpg,.jpeg,.webp,.gif,.png"></td><td></td></tr>
     <tr><td style="color: white">预览:</td><td> <img width="50" src="${path}/static/uploadimages/${sessionScope.user.userFace}" id="preview"> <span id="faceRs"></span></td></tr>
            </tbody>
            <tfoot>
            <tr><td></td><td> <input type="submit" class="btnSure" value="更改">&nbsp;<input type="reset" value="重置">&nbsp;<input type="button" value="取消" id="cancel"></td></tr>
            </tfoot>
        </table>
    </form>
</div>
</div>
    </body>
    </html>
